<template>
  <div style="width: 98%;margin: 1% auto 0;">
    <el-form
      ref="vForm"
      :model="formData"
      :rules="rules"
      label-position="top"
      label-width="80px"
      size="large"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="24" class="grid-cell">
          <div class="static-content-item">
            <el-alert
              title="商品溯源信息"
              type="success"
              description="商品有关信息如下"
              :closable="false"
              :center="true"
              :show-icon="true"
              effect="light"
            />
          </div>
        </el-col>
      </el-row>
      <div class="static-content-item">
        <el-divider direction="horizontal" content-position="right">我是可爱的分割线</el-divider>
      </div>
      <el-row>
        <el-col>
          <!--          :span="12" :offset="6" class="grid-cell"-->
          <div class="static-content-item">
            <div style="font-family: 华文新魏;font-size: 20px;">
              商 品 名 称 ： {{ comData.comName }}<br><br>
              商 品 标 识 符 ： {{ comData.comId }}<br><br>
              商 品 种 类 ： {{ comData.kind }}<br><br>
              生 产 厂 家 ： {{ comData.firmName }}<br><br>
              商 品 保 质 期（截至） ： {{ comData.expiration }}<br><br>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="grid-cell">
          <div class="static-content-item">
            <el-alert
              title="产品生产企业溯源信息"
              type="success"
              description="有关企业信息如下"
              :closable="false"
              :center="true"
              :show-icon="true"
              effect="dark"
            />
          </div>
        </el-col>
      </el-row>
      <div class="static-content-item">
        <el-divider direction="horizontal" content-position="left">我是可爱的分割线</el-divider>
      </div>
      <el-row>
        <el-col>
          <div class="static-content-item">
            <div style="font-family: 华文新魏;font-size: 20px;">
              企 业 名 称 ： {{ entData.firmName }}<br><br>
              企 业 联 系 电 话 ： {{ entData.firmTel }}<br><br>
              企 业 地 址 ： {{ entData.firmAdd }}<br><br>
              企 业 生 产 产 品 ： {{ entData.firmProduct }}<br><br>
              企 业 简 介 ： {{ entData.firmProfile }}<br><br>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="static-content-item">
        <el-alert
          title="产品出厂溯源信息"
          type="success"
          description="有关商品出厂信息如下"
          :closable="false"
          :center="true"
          :show-icon="true"
          effect="light"
        />
      </div>
      <div class="static-content-item">
        <el-divider direction="horizontal" content-position="right">我是可爱的分割线</el-divider>
      </div>
      <el-row>
        <el-col>
          <div class="static-content-item">
            <div style="font-family: 华文新魏;font-size: 20px;">
              产 品 名 称 ： {{ proData.proName }}<br><br>
              生 产 日 期 ： {{ proData.proBrith }}<br><br>
              保 质 期（截至） ： {{ proData.expiration }}<br><br>
              备 注 ： {{ proData.note }}<br><br>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="static-content-item">
        <el-alert
          title="商品物流信息"
          type="success"
          description="有关物流信息如下（注：表格可横向拖动）"
          :closable="false"
          :center="true"
          :show-icon="true"
          effect="dark"
        />
      </div>
      <div class="static-content-item">
        <el-divider direction="horizontal" content-position="left">我是可爱的分割线</el-divider>
      </div>
      <el-row type="flex" />
      <div style="text-align:center;">
        <el-table
          :data="proLogData"
          style="width: 100%;"
          border
          max-height="500px"
        >
          <el-table-column prop="productId" label="溯源码" width="80" />
          <el-table-column fixed prop="productName" label="出库产品" width="120" />
          <el-table-column prop="productCode" label="物流批次" width="100" />
          <el-table-column prop="productWeight" label="批次重量" width="80" />
          <el-table-column prop="productSource" label="源产地" width="200" />
          <el-table-column prop="outCharge" label="出库负责人" width="100" />
          <el-table-column prop="destination" label="运输目的地" width="200" />
          <el-table-column prop="inCharge" label="入库负责人" width="100" />
          <el-table-column prop="productBirth" label="批次生产时间" width="110" />
          <el-table-column prop="expiration" label="保质期（截至）" width="120" />
          <el-table-column prop="transporter" label="承运公司" width="150" />
          <el-table-column prop="note" label="备注" width="350" />
        </el-table>
      </div>
      <div class="static-content-item">
        <el-alert
          title="源产地信息"
          type="success"
          description="有关农场信息如下"
          :closable="false"
          :center="true"
          :show-icon="true"
          effect="light"
        />
      </div>
      <div class="static-content-item">
        <el-divider direction="horizontal" content-position="right">我是可爱的分割线</el-divider>
      </div>
      <el-row>
        <el-col>
          <div class="static-content-item">
            <div style="font-family: 华文新魏;font-size: 20px;">
              农场代号 ： {{ farmData.farmId }}<br><br>
              农场名称 ： {{ farmData.farmName }}<br><br>
              农场联系电话 ： {{ farmData.farmTel }}<br><br>
              农场地址 ： {{ farmData.farmLocation }}<br><br>
              相关产品 ： {{ farmData.farmProduct }}<br><br>
              农场简介 ： {{ farmData.farmProfile }}<br><br>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="button">
      <el-button type="primary" @click="backToHome">返 回 首 页</el-button>
    </div>
    <br>
  </div>
</template>

<script>
import request from '@/request'

export default {
  name: 'TraceByCode',
  components: {},
  props: {},
  data() {
    return {
      comId: '', // url中解密
      id: '', // url中解密
      comData: {
        comId: '',
        comName: '',
        kind: '',
        firmName: '',
        expiration: ''
      },
      entData: {
        firmNum: '',
        firmName: '',
        firmTel: '',
        firmAdd: '',
        firmProduct: '',
        firmProfile: ''
      },
      proData: {
        comId: '',
        proName: '',
        weight: '',
        proBrith: '',
        expiration: '',
        note: ''
      },
      proLogData: [],
      farmData: {},
      formData: {},
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    const url = window.location.href // 获取url中"?"符后的字串
    let tmp = url.split('=')[1]
    tmp = tmp.replaceAll('%3A', ':').replaceAll('%3B', ';')
    // console.log('url: ' + tmp)
    request.get('/code/out', {
      params: {
        code: tmp
      }
    }).then(res => {
      if (res.code === 0) {
        this.$message({
          type: 'error',
          message: res.msg
        })
        return
      }
      this.$message({
        type: 'warning',
        message: '正在查询防伪溯源码：' + tmp
      })
      this.comId = res.data.v1
      this.id = res.data.v2
      console.log(this.id)
      this.getComData(this.comId, this.id)
      this.getProData(this.comId)
      this.getProLogData(this.comId)
    })
  },
  mounted() {
  },
  methods: {
    backToHome() {
      this.$router.push({ path: '/login' })
    },
    getComData(comId, id) {
      request.get('/commodity/find', {
        params: {
          id: id,
          comId: comId
        }
      }).then(res => {
        if (res.code === 20000) {
          console.log(res.data)
          this.comData.comId = res.data.comId
          this.comData.comName = res.data.comName
          this.comData.kind = res.data.kind
          this.comData.firmName = res.data.firmName
          this.comData.expiration = res.data.expiration
          this.getEntData(res.data.firmName, this.id)
          this.$notify({
            type: 'success',
            message: '商品信息溯源完毕!',
            offset: 70
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return
        }
      })
    },
    getEntData(firmName, id) {
      request.get('/firmInfo/findOne', {
        params: {
          id: id,
          firmName: firmName
        }
      }).then(res => {
        if (res.code === 20000) {
          this.entData.firmNum = res.data.firmNum
          this.entData.firmName = res.data.firmName
          this.entData.firmTel = res.data.firmTel
          this.entData.firmAdd = res.data.firmAdd
          this.entData.firmProduct = res.data.firmProduct
          this.entData.firmProfile = res.data.firmProfile
          this.$notify({
            type: 'success',
            message: '生产企业信息溯源完毕!',
            offset: 70
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return
        }
      })
    },
    getProData(comId) {
      request.get('/productInfo/findOne', {
        params: {
          comId: comId
        }
      }).then(res => {
        if (res.code === 20000) {
          this.proData.comId = res.data.comId
          this.proData.proName = res.data.proName
          this.proData.weight = res.data.weight
          this.proData.proBrith = res.data.proBrith
          this.proData.expiration = res.data.expiration
          this.proData.note = res.data.note
          this.$notify({
            type: 'success',
            message: '产品信息溯源完毕!',
            offset: 70
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return
        }
      })
    },
    getProLogData(productId) {
      request.get('/productLog/findOnes', {
        params: {
          productId: productId
        }
      }).then(res => {
        if (res.code === 20000) {
          this.proLogData = res.data
          console.log(res.data[0].productSource + res.data[0].tenantId)
          this.getFarmData(res.data[0].productSource, res.data[0].tenantId)
          this.$notify({
            type: 'success',
            message: '产品出库物流信息生产完毕!',
            offset: 70
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return
        }
      })
    },
    getFarmData(name, tenantId) {
      request.get('/farmInfo/findOne', {
        params: {
          name: name,
          tenantId: tenantId
        }
      }).then(res => {
        if (res.code === 20000) {
          console.log(res.data)
          this.farmData = res.data
          this.$notify({
            type: 'success',
            message: '源产地信息溯源完毕!',
            offset: 70
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return
        }
      })
    },
    submitForm() {
      this.$refs['vForm'].validate(valid => {
        if (!valid) return
        // TODO: 提交表单
      })
    },
    resetForm() {
      this.$refs['vForm'].resetFields()
    }
  }
}
</script>

<style scoped>
.button {
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
</style>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
